<template>
  <div class="clue">
    <div class="head">
      <i class="iconfont head-icon" @click="comeBack">&#xe689;</i>
      亲青筹
    </div>
    <div class="clue-list">
       <ul v-show="geren">
         <!--<li>-->
           <!--<span>受助人姓名 :</span><input v-model="list.helpName" placeholder="请输入你的姓名"/>-->
         <!--</li>-->
         <group title="">
           <x-input title="受助人姓名 :" v-model="list.helpName" name="helpName" placeholder="请输入你的姓名" ></x-input>
         </group>
         <group title="">
           <x-input title="身份证号码 :" ref="sfz" v-model="list.idCard" name="idCard" placeholder="请输入您的身份证号码" :is-type="sfzyanzhen"></x-input>
         </group>
         <group>
           <x-address title="所 在 位 置 :" placeholder="请选择地址" v-model="valueD" raw-value :list="addressData" hide-distric="hideDistric"></x-address>
         </group>

         <!--<li>-->
           <!--<span>所在省份:</span><input placeholder="所在省份"/>-->
         <!--</li>-->
         <!--<li>-->
           <!--<span>所 在 市:</span><input placeholder="所在市"/>-->
         <!--</li>-->
         <!--<li>-->
           <!--<span>所在区县:</span><input placeholder="所在区县"/>-->
         <!--</li>-->
         <group title="">
           <x-input title="详 细 地 址 :" v-model="list.address" name="address" placeholder="请输入您的详细地址" ></x-input>
         </group>
         <group title="">
           <x-input type="number" title="手 机 号 码 :" ref="mobile" v-model="list.mobile" name="mobile" placeholder="请输入您的手机号码" keyboard="number" is-type="china-mobile"></x-input>
         </group>
       </ul>
       <ul v-show="qiuzhuren">
         <group title="">
           <x-input type="number" title="银行卡账号 :" v-model="list.bankId" name="bankId" placeholder="请输入你的银行卡账号" ></x-input>
         </group>
         <group title="">
           <x-input title="银行账户名 :" v-model="list.bankName" name="bankName" placeholder="请输入你的银行账户名" ></x-input>
         </group>
         <group title="">
           <x-input title="开 户 银 行 :" v-model="list.bankFrom" name="bankFrom" placeholder="请输入你的开户银行" ></x-input>
         </group>
         <!--<li>-->
           <!--<span>银行卡账号 :</span><input v-model="list.bankId" placeholder="请输入求助人或父母的银行卡账号"/>-->
         <!--</li>-->
         <!--<li>-->
           <!--<span>银行账户名 :</span><input v-model="list.bankName" placeholder="请输入求助人的银行账号名称"/>-->
         <!--</li>-->
         <!--<li>-->
           <!--<span>开 户 银 行 :</span><input v-model="list.bankFrom" placeholder="请输入求助人的银行卡开户行"/>-->
         <!--</li>-->
         <!--<li>-->
           <!--<span>求 助 组 织 :</span><input style="height: 40px;margin-top: 2px" v-model="list.organization" placeholder="请输入求助组织"/>-->
         <!--</li>-->

         <group title="">
           <selector title="求 助 组 织 :" placeholder="请选择求助组织" v-model="list.organization" :options="listop"></selector>
         </group>
         <div class="oneOver">
           <group title="">
             <x-textarea title="求 助 内 容 :" @on-change="howTextLen" placeholder="请输入求助详情，不少于50字" v-model="list.content" :height= 'heightT' :rows="12"></x-textarea>
             <p style="text-align: right;padding-right: 20px;color: #cccccc;padding-bottom: 10px">{{textLength}}/50</p>
           </group>

         </div>


         <!--<group title="">-->
           <!--<x-input title="求 助 内 容 :" v-model="list.content" name="content" placeholder="请输入求助详情，不少于200字" ></x-input>-->
         <!--</group>-->
         <!--<li class="text-textarea">-->
           <!--<span>求 助 内 容 :</span><textarea v-model="list.content" placeholder="请输入求助详情，不少于200字"/>-->
         <!--</li>-->
       </ul>
    </div>
    <div class="clue-list-two" v-show="imageShow">
      <ul>
        <li>
          <p>身 份 证 照:</p>
          <div class="file-content">
            <!--<a href="javascript:;" class="file">选择文件-->
              <!--<input type="file" name="" id="">-->
            <!--</a>-->
            <el-upload
              class="avatar-uploader"
              :action="imageHttp"
              name="imgFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccessz"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarPorgress">
              <img v-if="list.idCardUrlz" :src="imageUrl.imageUrl + list.idCardUrlz" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <h4>身份证正面照</h4>
            </el-upload>
            <el-upload
              class="avatar-uploader"
              :action="imageHttp"
              name="imgFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccessf"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarPorgress">
              <img v-if="list.idCardUrlf" :src="imageUrl.imageUrl + list.idCardUrlf" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <h4>身份证反面照</h4>
            </el-upload>
            <!--<a href="javascript:;" class="file">选择文件-->
              <!--<input type="file" name="" id="">-->
            <!--</a>-->
          </div>
        </li>
        <li>
          <p>贫 困 证 明: <span>(可选)</span></p>
          <div class="file-content">
            <el-upload
              class="avatar-uploader"
              :action="imageHttp"
              name="imgFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccessp"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarPorgress">
              <img v-if="list.poolUrl" :src="imageUrl.imageUrl + list.poolUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <h4>贫困证明</h4>
            </el-upload>
          </div>
        </li>
        <li>
          <p>医院诊断证明:<span>(可选)</span></p>
          <div class="file-content">
            <div class="file-content">
              <el-upload
                class="avatar-uploader"
                :action="imageHttp"
                name="imgFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccessy"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError"
                :on-progress="handleAvatarPorgress">
                <img v-if="list.hospitalUrl" :src="imageUrl.imageUrl + list.hospitalUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <h4>医院诊断证明</h4>
              </el-upload>
            </div>
          </div>
        </li>
        <li>
          <p>求助人现状照:<span>(可选)</span></p>
          <div class="file-content">
            <el-upload
              class="avatar-uploader"
              :action="imageHttp"
              name="imgFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccessx"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarPorgress">
              <img v-if="list.nowPic" :src="imageUrl.imageUrl + list.nowPic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <h4>求助人现照</h4>
            </el-upload>
          </div>
        </li>
        <li>
          <p>其他证明照片:<span>(可选)</span></p>
          <div class="file-content">
            <el-upload
              class="avatar-uploader"
              :action="imageHttp"
              name="imgFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccessq"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarPorgress">
              <img v-if="list.otherPic" :src="imageUrl.imageUrl + list.otherPic" class="avatar">
              <i v-else class="avatar-uploader-icon el-icon-plus"></i>
              <h4>其他照片</h4>
            </el-upload>
          </div>
        </li>
      </ul>
    </div>
    <div class="next" v-show="geren" >
      <button class="clue-next" @click="firstPage">下一步</button>
    </div>
    <div class="next" v-show="qiuzhuren" >
      <button class="clue-next" @click="secondPage">下一步</button>
    </div>
    <div class="next" v-show="imageShow">
      <button class="clue-next" @click="submit()">提交</button>
    </div>
    <div class="submit-next" v-show="imageShow">
      注：提交的线索将存入亲青筹线索库，我们将通过相关社会组织和所在地团委审核后进行救助。
    </div>
  </div>
</template>

<script src="./clue.js"></script>
